<template>
	<view class="flex" :style="{ 'flex-direction': reverse ? 'column-reverse' : 'column' }">
		<slot></slot>
	</view>
</template>
<script lang="ts" setup>
import { computed, provide } from 'vue'
/**
 * 时间轴
 * @description 内部只可放置 tm-timeline-item 组件，不可放置其它组件。
 * @example 示例如下：
    <tm-timeline>
        <tm-timeline-item time="20222-3-25">
            <tm-sheet :shadow="2" :margin="[0,0]">
                <tm-text label="已经到了中转站，请注意查收已经到了中转站，请注意查收已经到了中转站，请注意查收已经到了中转站，请注意查收" ></tm-text>
            </tm-sheet>
        </tm-timeline-item>
    </tm-timeline>
 */
const props = defineProps({
	//是否反转。
	reverse: {
		type: Boolean,
		default: false
	},
	//left,right,center[暂时不要使用center]
	//对齐方式，左，中，右。
	position: {
		type: String,
		default: 'left'
	}
})

provide(
	'tmTimeLinePosition',
	computed(() => props.position)
)
</script>
<style scoped></style>
